<template>
  <el-dialog
    title="系列号下的零件号"
    width="800px"
    :before-close="cancel"
    append-to-body
    :visible.sync="checkLoading"
  >
    <el-table :data="parentList" :border="true" :row-class-name="tableRowClassName">
      <el-table-column label="编号" width="50" align="center" prop="index" />
      <el-table-column label="系列号" align="center" width="120" prop="parentGoodsNo" />
      <el-table-column label="零件号码" align="center" prop="goodsNo" />
      <el-table-column label="匹配个数" align="center" prop="num" />
      <el-table-column label="零件名称" align="center" prop="goodsName" />
      <el-table-column
        label="剩余库存数量"
        align="center"
        width="100"
        prop="currentStock"
      />
      <el-table-column label="单位" align="center" width="55" prop="unit" />
    </el-table>
  </el-dialog>
</template>

<script>
import { getParentList } from "@/api/tms/goodsParent";
export default {
  name: "CheckParent",
  props: {
    checkLoading: Boolean,
    record: Object,
  },
  data() {
    return {
      parentList: [],
    };
  },
  watch: {
    checkLoading: {
      deep: true,
      handler: function (newV, oldV) {
        if (newV) {
          this.getList();
        }
      },
    },
  },
  methods: {
    getList() {
      getParentList(this.record.parentGoodsNo).then((res) => {
        this.parentList = res.data;
        for (let i = 0; i < this.parentList.length; i++) {
          this.parentList[i].index = i + 1;
        }
      });
    },
    cancel() {
      this.$emit("refresh");
    },
    // 表单隔行变色
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "success-row";
      } else {
        return "warning-row";
      }
    },
  },
};
</script>

<style>
.el-table .warning-row {
  background: #f7faff;
}
.el-table .success-row {
  background: #ebf1fb;
}
</style>
